<h1 mat-dialog-title>Import project</h1>
<div [hidden]="isFirstStepCompleted">
  <form [formGroup]="projectNameForm" class="file-name-form">
    <input
      type="file"
      accept=".gns3project, .gns3p"
      class="non-visible"
      #file
      (change)="uploadProjectFile($event)"
      ng2FileSelect
      [uploader]="uploader"
    />
    <button mat-raised-button color="primary" (click)="file.click()" matTooltip="Import your .gns3p or .gns3project file" class="file-button">Choose file</button>
    <mat-form-field [ngClass]="{ empty: !isDeleteVisible }" class="file-name-form-field">
      <input
        matInput
        type="text"
        formControlName="projectName"
        [ngClass]="{ 'is-invalid': form.projectName.errors }"
        placeholder="Please enter name"
      />
      <mat-error *ngIf="form.projectName.errors && form.projectName.errors.required"
        >Project name is required</mat-error
      >
      <mat-error *ngIf="form.projectName.errors && form.projectName.errors.invalidName"
        >Project name is incorrect</mat-error
      >
    </mat-form-field>
    <button class="delete-button" [hidden]="!isDeleteVisible">
      <mat-icon color="primary" (click)="onDeleteClick()" class="delete-icon">clear</mat-icon>
    </button>
    <div mat-dialog-actions>
      <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
      <button
        mat-button
        [disabled]="!isImportEnabled"
        (click)="onImportClick()"
        tabindex="2"
        mat-raised-button
        color="primary"
      >
        Import
      </button>
    </div>
  </form>
</div>
<div [hidden]="!isFirstStepCompleted">
  <div class="progress">
    <div class="progress-bar" role="progressbar" [ngStyle]="{ width: uploader.progress + '%' }"></div>
  </div>
  <div class="result-message-box">
    <span>{{ resultMessage }}</span>
  </div>
  <div mat-dialog-actions>
    <button
      mat-button
      [disabled]="!isFinishEnabled"
      (click)="onNoClick()"
      tabindex="2"
      mat-raised-button
      color="primary"
    >
      Finish
    </button>
  </div>
</div>
